<template>
  <div class="passenger-inf-box">
    <div class="number">{{number}} </div>
    <el-form :model="information" :rules="rules" label-position="left" label-width="80px"  ref="form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="information.name" type="text" name="name"  ></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="ID">
        <el-input v-model="information.ID" type="text" name="ID"></el-input>
      </el-form-item>
      <el-form-item label="身份">
        <el-radio v-model="information.identity" label="adult" @click="check1">成人</el-radio>
        <el-radio v-model="information.identity" label="child" @click="check2">儿童</el-radio>
      </el-form-item>
      <el-form-item label="保险信息" prop="insurance">
        	<input type="checkbox"
    				name="choose"
    				value="choose" @click="insurance1"/> 航空综合险 
            <span class="high-light">￥ 30/单航段/份 </span>
            （含高额航意、延误取消保障等）<router-link to="insuranceClause1"  target="_blank">保险条款</router-link>
					<br>	
					<input type="checkbox"
    				name="choose"
    				value="choose" @click="insurance2"/>无忧退票险
            <span class="high-light">￥ 30/单航段/份 </span>
            （退票补偿票价损失的65%，最高1500元）<router-link to="insuranceClause2" target="_blank">保险条款</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { defineComponent,ref,Ref } from 'vue';

export default defineComponent({
  props:{
    number: Number,
    identity: String
  },
	setup(props,context) {
     const information = ref({
      name: '',
      ID: '',
      identity: (props.identity as string),
      insurance1: false,
      insurance2: false,
    });

    const form = ref(null);
    //单选和多选框的值和函数
    let cnt1 = 0;
    let cnt2 = 0
    const check1 = () => {
      if (information.value.identity === "child" ) {
        if (cnt1 == 0) {
          context.emit("isAdult");
          cnt1++;
        } else {
          cnt1--;
        } 
      } 
    }
     const check2 = () => {
      if (information.value.identity === "adult") {
          if (cnt2 == 0) {
          context.emit("isChild");
          cnt2++;
        } else {
          cnt2--;
        } 
      }
    }
    const insurance1 = () => {
      if (information.value.insurance1 === false) {
        information.value.insurance1 = true;
        context.emit("addInsurance");
      } else {
        information.value.insurance1 = false;
        context.emit("discardInsurance");
      }
    }
     const insurance2 = () => {
      if (information.value.insurance2 === false) {
        information.value.insurance2 = true;
        context.emit("addInsurance");
      } else {
        information.value.insurance2 = false;
         context.emit("discardInsurance");
      }
    }
    //当前表达格式是否正确
    const checkName = (rule:any, value:any, callback:any) => {
      if (!value) {
        return callback(new Error("姓名不能为空"));
      }
      let r =/^[\u4E00-\u9FFF]{2,6}$/;
      if (!r.test(value)) {
        return callback(new Error("姓名应该为2到6个汉字"));
      }
      callback();
    };
    const checkID = (rule:any, value:any, callback:any) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      let r =/^\d{18}$/;
      if (!r.test(value)) {
        return callback(new Error("身份证号应该为18位数字"));
      }
    };
     
    const rules = {
        name: [{validator: checkName, trigger: 'change'}],
        ID: [{validator: checkID, trigger: 'change'}],
    };
    return{
      form,
      check1,
      check2,
      insurance1,
      insurance2,
      //绑定各个输入框的内容
      information,
      //表单验证规则
      rules
    };
  },
});
</script>
<style lang="scss" scoped>
  @import '@/assets/css/config.scss';
 
	.passenger-inf-box{
		width: 660px;
		padding: 30px 20px;
		border: 1px solid $themeLightGray;
	}
  .number{
    font-size: 30px;
    color: rgb(150, 210, 255);
  }
  .el-form{
    padding-left: 30px;
  }
  .el-input{
    width: 320px;
  }
	:deep(input:focus.el-input__inner){
		border-width: 1px !important;
		border-radius: 5px;
	}
	:deep(.el-input__inner){
		border-width: 0 0 1px 0;
		border-radius: 0;
	}
	.high-light{
    color: rgb(255, 102, 0);
  }
  a{
    text-decoration: none;
    color: rgb(90, 165, 240);
  }
  a:hover{
    text-decoration: underline;
  }
  
</style>

